import { ref } from 'vue';
<template>
  <div class="time-range">
    <div>
      <el-time-select
        class="time-select"
        v-model="startTime"
        :max-time="endTime"
        :placeholder="startPlaceholder"
        :start="startTimeStart"
        :end="startTimeEnd"
        :step="startStep"
        v-bind="{ ...($attrs ?? {})?.startOptions }"
      />
    </div>
    <span>-</span>
    <div>
      <el-time-select
        v-model="endTime"
        :disabled="endDisabled"
        class="time-select"
        :min-time="startTime"
        :placeholder="endPlaceholder"
        :start="endTimeStart"
        :end="endTimeEnd"
        :step="endStep"
        v-bind="{ ...$attrs?.endOptions }"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  startTimeStart: {
    type: String,
    default: "08:30",
  },
  startPlaceholder: {
    type: String,
    default: "开始时间",
  },
  endPlaceholder: {
    type: String,
    default: "结束时间",
  },
  startTimeEnd: {
    type: String,
    default: "23:30",
  },
  startStep: {
    type: String,
    default: "00:30",
  },
  endTimeStart: {
    type: String,
    default: "08:30",
  },
  endTimeEnd: {
    type: String,
    default: "23:30",
  },
  endStep: {
    type: String,
    default: "00:30",
  },
});

let startTime = ref("");
let endTime = ref("");
let endDisabled = ref(true);
const emits = defineEmits(["startChange", "endChange"]);

watch(
  () => startTime.value,
  (val) => {
    if (!val) {
      endDisabled.value = true;
      endTime.value = "";
    } else {
      endDisabled.value = false;
      emits("startChange", val);
    }
  }
);

watch(
  () => endTime.value,
  (val) => {
    if (!val) {
    } else {
      let info = {
        startTime: startTime.value,
        endTime: val,
      };
      emits("endChange", info);
    }
  }
);
</script>

<style lang="scss" scoped>
.time-range {
  display: flex;
  align-items: center;
  span {
    margin: 0 5px;
  }
  .time-select {
    width: 150px;
  }
}
</style>
